<template>
    <div class="white-box">
        <div class="table-mb">
            <el-button type="primary" @click="clickUpdate(1, '')">添加</el-button>
        </div>
        <el-table
            class="table-mb"
            v-loading="loading"
            :data="arr_data"
            :header-cell-style="{ background: '#F5F7FA' }"
            element-loading-background="rgba(255, 255, 255, 0.6)"
        >
            <el-table-column prop="attr_id" label="属性ID" width="100"></el-table-column>
            <el-table-column prop="attr_name" label="属性名称" width="150"></el-table-column>
            <el-table-column prop="attr_value" label="属性值"></el-table-column>
            <el-table-column label="排序" width="160">
                <template #default="{ row }">
                    <el-input
                        v-model.trim="row.order_by"
                        clearable
                        oninput="value=value.replace(/[^\d]/g,'')"
                        placeholder="请输入排序数字"
                        @change="() => inputSort(row)"
                        style="width: 100px"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="created_at_label" label="添加时间" width="160"></el-table-column>
            <el-table-column label="操作" width="160" class-name="operation-nav" fixed="right">
                <template #default="{ row }">
                    <el-button link type="primary" class="theme-btn" @click="clickUpdate(2, row.attr_id)"> 编辑 </el-button>
                    <el-popconfirm title="是否确定删除？" confirm-button-text="确定" cancel-button-text="取消" @confirm="clickDel(row)">
                        <template #reference>
                            <el-button link type="primary" class="theme-btn">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
            background
            v-model:current-page="page"
            v-model:page-size="pageSize"
            :page-sizes="pageSizeNum"
            :total="totalNums"
            layout="total, sizes, prev, pager, next, jumper"
        >
        </el-pagination>
    </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, watch } from "vue"
import OneLoad from "@mixins/one-load"
import { useRouter } from "vue-router"

const { proxy } = getCurrentInstance()
const router = useRouter()

onMounted(() => {
    getList()
})

/**
 * minxin列表加载
 */
const { page, pageSizeNum, pageSize, loading, arr_data, totalNums, pubParams, pubRefreshParams, getdata } = OneLoad()

// 切换每页显示条数
watch(pageSize, (val) => {
    page.value = 1
    pubParams(getList)
})
// 跳转第几页
watch(page, (val) => {
    pubParams(getList)
})

function getList() {
    let params = {
        page: page.value,
        limit: pageSize.value,
    }
    getdata("product/attr/index", params)
}

// 删除单个
const clickDel = (row) => {
    postDel(row.attr_id)
}
// 删除接口
function postDel(params) {
    proxy.$axios
        .post("product/attr/delete", {
            attr_id: params,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

// 排序
const inputSort = (row) => {
    if (!row.order_by) {
        proxy.$message({ message: "请输入排序数字", type: "warning" })
        return
    }
    proxy.$axios
        .post("product/attr/sort", {
            attr_id: row.attr_id,
            order_by: row.order_by,
        })
        .then((res) => {
            if (res.data.code == 0) {
                pubParams(getList)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

const clickUpdate = (type, eid) => {
    let obj = {
        path: "/Goods/GoodsAttrUpdate",
        query: {},
    }
    if (type == 2) {
        obj.query.eid = eid
    }
    router.push(obj)
}
</script>
<script>
export default {
    name: "GoodsAttr",
}
</script>

<style lang="less" scoped></style>